<template>
  <div>
    <h1>登录</h1>

    <van-cell-group>
      <van-field clearable v-model="phone" label="" placeholder="手机号">
        <span slot="text">如何获取</span>
      </van-field>
      <van-field
        center
        clearable
        v-model="verify"
        label="验证码"
        placeholder=""
      >
        <van-button slot="button" @click="yan()" type="primary" size="middle" plain>
          获取验证码
        </van-button>
      </van-field>
      <van-button @click="login()" type="info" block>登录</van-button>
    </van-cell-group>

    <div style="margin-top: 410px;">
      <van-row type="flex" justify="space-around">
        <van-col @click="registerLogin()" span="6">还没账号我要注册...</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Toast} from "vant";

export default {
  data () {
    return {
      phone: '', // 定义sms变量
      verify: null, // 定义verify变量
      user:{},
      nid:0
    }
  },
  methods: {
    yan() {
      Toast.loading({ message: '发送中...', forbidClick: true });
      axios.get(`/user/JWTTest/send?phone=${this.phone}`).then(res=>{
        if (res.data.code==1){
          this.$message.success('发送成功')
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },
    registerLogin(){
      this.$router.push('/register')
    },
    login(){
      Toast.loading({ message: '登录中...', forbidClick: true });
      axios.get(`/user/user/login?phone=${this.phone}&verify=${this.verify}`).then(res=>{
        if(res.data.code==1){
          this.$message.success('登录成功')
          this.user=res.data.data
          console.log("user=" + this.user)
          console.log("data=" + res.data.data)
          // 将id先存到域中
          this.nid=this.user.data.id
          sessionStorage.setItem('id',JSON.stringify(this.nid))
          localStorage.setItem('user',JSON.stringify(this.user.data))//存储数据
          console.log(this.user.data)
          this.$router.push('/show')
        }else {
          this.$message.error('登录失败')
        }
      })
    }
  },
  mounted() {

  }
}
</script>
